<template>
  <el-card class="content">
    <div slot="header" class="clearfix">
      <span>分类管理</span>
    </div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="addFormDialogVisible=true">添加</el-button>
      <el-input v-model="searchParams.name" placeholder="请输入分类名称" style="width: 30%;margin-left: 10px;margin-right: 10px;"></el-input>
      <el-button type="primary" @click="getClassify">查找</el-button>
    </div>
    <el-table
        :data="tableValue"
        border>
      <el-table-column
          prop="id"
          label="id"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="分类名"
      >
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              v-if="scope.row.id===1" disabled>不可操作</el-button>
          <el-button
              size="mini"
              v-if="scope.row.id!==1"
              @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              v-if="scope.row.id!==1"
              @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 20px">
      <el-pagination
          :page-size="this.searchParams.pageSize"
          :current-page="this.searchParams.pageNum"
          layout="prev, pager, next"
          :total="this.total"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog
        title="添加分类"
        :visible.sync="addFormDialogVisible"
        width="20%"
        center>
      <el-form label-position="left" label-width="80px" :model="newClassify">
        <el-form-item label="分类名">
          <el-input v-model="newClassify.name"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="addFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addClassify">确 定</el-button>
    </el-dialog>
    <el-dialog
        title="更新分类"
        :visible.sync="updateFormDialogVisible"
        width="20%"
        center>
      <el-form label-position="left" label-width="80px" :model="updateClassify">
        <el-form-item label="分类名">
          <el-input v-model="updateClassify.name"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="updateFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="classifyUpdate">确 定</el-button>
    </el-dialog>
  </el-card>

</template>

<script>
import {addClassify, classifySearch, deleteClassify, updateClassify} from "@/api/classifyApi";

export default {
  name: "ClassifyInfo",
  data(){
    return{
      searchParams:{
        pageNum:1,
        pageSize:5,
        name:""
      },
      newClassify:{},
      updateClassify:{},
      tableValue:[],
      total:0,
      addFormDialogVisible:false,
      updateFormDialogVisible:false,
    }
  },
  methods:{
    getClassify(){
      classifySearch(this.searchParams).then(res=>{
        if (res.code===200){
          this.tableValue=res.data.records;
          this.total=res.data.total;
        }
      })
    },
    addClassify(){
        addClassify(this.newClassify).then(res=>{
          if (res.code===200){
              this.getClassify();
              this.addFormDialogVisible=false;
          }
        })
    },
    pageSizeChange(val){
      this.searchParams.pageSize=val;
      this.getClassify(this.searchParams.pageNum);
    },
    handleUpdate(classify){
      this.updateClassify=classify;
      this.updateFormDialogVisible=true;
    },
    handleDelete(id){
      deleteClassify(id).then(res=>{
        if (res.code===200){
          this.getClassify(this.searchParams.pageNum);
        }
      })
    },
    classifyUpdate(){
      updateClassify(this.updateClassify).then(res=>{
        if (res.code===200){
          this.getClassify(this.searchParams.pageNum);
          this.updateFormDialogVisible=false;
        }
      })
    },
  handleCurrentChange(val) {
    this.searchParams.pageNum=val;
    this.getClassify();
  }
  },
  mounted() {
    this.getClassify();
  }
}
</script>

<style scoped>

</style>
